<template>
    <div>
            <!--model:表单数据-->
            <el-form  label-width="80px" :model="userForm" :rules="rule" ref="userForm">
                <el-form-item label="账号" prop="userName">
                    <el-input v-model="userForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="部门id" prop="deptId">
                    <el-input v-model="userForm.deptId"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="loginName">
                    <el-input v-model="userForm.loginName"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" prop="userType">
                    <el-select v-model="userForm.userType" placeholder="请选择用户类型">
                        <el-option label="系统用户" value='0'></el-option>
                        <el-option label="其他" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phonenumber">
                    <el-input v-model="userForm.phonenumber"></el-input>
                </el-form-item>
                <el-form-item label="头像路径" prop="avatar">
                    <el-upload
                            class="avatar"
                            action="http://localhost:80/system/upload"
                            :show-file-list="false"
                            :headers="{'token' :token}"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imgUrl" :src="imgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="userForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEditUser('userForm')">确 定</el-button>
              </span>
    </div>
</template>

<script>
    export default {
        name: "PersonCenter",
        data(){
            return{
                rule: {
                    userName: [
                        {
                            required: true, message: '姓名不能为空', trigger: 'blur'
                        },
                        {
                            min: 5, max: 16, message: '长度在 5 到 16 个字符'
                        },
                        {
                            pattern: /^[\\u4e00-\\u9fa5_a-zA-Z0-9-]{5,16}$/, message: '限16个字符，支持英文、数字、减号或下划线'
                        }
                    ],
                    deptId:[
                        {
                            required: true, message: '部门ID不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^[0-9]*[1-9][0-9]*$/, message: '限正整数'
                        }

                    ],
                    loginName:[
                        {
                            required: true, message: '昵称不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '仅支持中英文、数字'
                        }
                    ],
                    email:[
                        {
                            required: true, message: '邮箱不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '只允许英文字母、数字、下划线、英文句号、以及中划线组成'
                        }

                    ],
                    phonenumber:[
                        {
                            required: true, message: '手机号码不能为空', trigger: 'blur'
                        },
                        {
                            pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: '手机号码格式不正确'
                        }

                    ],
                },
                userForm:{},
                token:"",
                imgUrl:"",

            }
        },
        methods:{
            handleAvatarSuccess(res, file) {
                this.imgUrl =res.result.path;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            suodingUser(){
                var that = this
                var id = sessionStorage.getItem("id");
                that.token= sessionStorage.getItem("token")
                this.$http.get("system/menu/querybyUserid?userId="+id).then(r=>{
                    that.userForm=r.data.result.users[0]
                    that.imgUrl=r.data.result.users[0].avatar;
                })

            },
            confirmEditUser(userForm){
                this.$refs[userForm].validate((valid) => {
                    if(valid){
                        var username = sessionStorage.getItem("username");
                        var that = this
                        this.userForm.avatar=this.imgUrl;
                        this.$http.put(`system/menu/editUser/${username}`,this.userForm).then(r=>{
                            this.$message.success("修改成功")
                            this.suodingUser()
                        })
                    }else{
                        this.$message.error("请按规范填写表中数据")
                    }

                })

            },
        },
        mounted(){
            this.suodingUser()

        }
    }
</script>

<style scoped>

</style>